<template>
	<!-- 轮播大图 -->
	<div class="swiper-container swiper-no-swiping swiper-full-small" :id="'fullsmall'+id">
		<div class="swiper-wrapper">
			<div class="swiper-slide"  v-for='(val,i) in smallArr' :key="'ban'+i">
				<div class="swiper-slide-null" v-if="val.url" :style="{backgroundImage: 'url(' + val.url + ')'}"></div>
				<div class="swiper-slide-null" v-else></div>
			</div>
		</div>   
		<div class="swiper-pagination banner-num swiper-pagination-small" v-show="pagination"></div>   
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data(){
		return {
			swiper: null,//轮播
		}
	},
	props:{
		smallArr: Array,
		id: String,
		pagination: Boolean
	},
	created(){
		console.log("created");
	},
	mounted(){ 
		this.newSwiper();
	},
	destroyed(){
		this.swiper && this.swiper.destroy(false, false);
	},
	methods:{
		newSwiper(){
            this.$nextTick(()=>{
				this.swiper && this.swiper.destroy(false, false);
				let obj = {
					height:'375',
					loop : true,
					autoplay: {
						disableOnInteraction: false,
					},
					speed:3000,
					observer: true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents: true,//修改swiper的父元素时，自动初始化swiper
					observeSlideChildren:true,                
					lazyLoadingInPrevNext : true,//图片预先加载
					lazyLoadingInPrevNextAmount :1,
					pagination: '#fullsmall'+this.id+' .swiper-pagination-small',
					paginationType: 'fraction'
				}
				this.swiper = new Swiper ('#fullsmall'+this.id, obj);
			})
		},
	},
	watch: {
		smallArr:{
			handler:function(val,old){
				this.newSwiper();
			},
			deep:true
		}
	}
}
</script>
<style lang="less" scoped>
@import "../../../../../static/css/style.less";
@import "../../../../../static/css/element.less";
@import "../../../../../static/css/imgStyle.less";
</style>

